/**
*选择库位
*/
<template>
  <vp-dialog ref="editDialogRef" :span="2">
        <template #title>
            <vp-label zh="选择库位" en="Select Location" align="left"/>
        </template>
        <vp-card shadow="hover" class="mb5">
            <el-form label-suffix=":"  ref="searchFormRef" :model="searchForm" @submit.prevent 
                @keyup.enter="loadDataList" label-width="120px">
                <vp-search-row >
                <vp-search-col :span="2">
                    <el-form-item prop="kw">
                        <template #label><vp-label zh="库位" en="Location"/></template>
                        <el-input v-model="searchForm.kw" v-trim placeholder="" clearable></el-input>
                    </el-form-item>
                </vp-search-col>
                <vp-search-col btn-col>
                    <vp-btn-search :loading="loading" @click="loadDataList"/>
                    <vp-btn-reset @click="handleSearchReset"/>
                </vp-search-col>
                </vp-search-row>
            </el-form>
        </vp-card>
        <vp-card v-loading="loading">
            <el-table :data="tableData" @current-change="handleCurrentChange" ref="singlelTable" highlight-current-row stripe border  style="width: 100%" row-key="id" :max-height="400">
                <el-table-column align="center" label="#"  type="index"></el-table-column>
                <el-table-column  prop="ckmc" show-overflow-tooltip>
                    <template #header><vp-label zh="仓库名称" en="Warehouse"/></template>
                </el-table-column>
                <el-table-column prop="kw" show-overflow-tooltip>
                    <template #header><vp-label zh="库位" en="Location"/></template>
                </el-table-column>
            </el-table>
            <el-pagination background class="mt5"
                layout="prev, pager, next, total" 
                :total="page.total"
                v-model:currentPage="page.pageNum"
                v-model:pageSize="page.pageSize"
                :hide-on-single-page="false"
            >
            </el-pagination>
        </vp-card>
        <template #footer>
            <vp-btn-empty  @click="handleClear"/>
            <vp-btn-confirm  @click="handleSave"/>
        </template>
  </vp-dialog>
</template>

<script setup lang="ts" name="VpWarehouseLocation">
import { defineComponent, reactive, ref, toRefs, watch } from 'vue';
import request from '/@/utils/request';
import { DEFAULT_PAGE } from '/@/utils/page';

    const searchForm = ref({
        keyword: "",
    });

    const searchFormRef = ref();

    const tableData = ref([]);
    const loading = ref(false);
    const callback = ref((data: any)=>{});

    const singlelTable = ref();
    const editDialogRef = ref();
    const currentRow = ref({});
    const selectedId = ref("");
    const page = reactive({
		...DEFAULT_PAGE,
	});


    const handleOpen = (param: any)=>{
        editDialogRef.value.handleOpen();
        currentRow.value = {};

        if (param.callback && typeof param.callback === "function") {
          callback.value = param.callback;
        }
        loadDataList();
    }

    const loadDataList = () => {
        loading.value = true;
        request.get('/masterData/warehouse/location/open/list', {
			params: {
				...searchForm.value,
                ...page,
			}
		}).then(res => {
            tableData.value = res?.data.list || [];
            page.total = res?.data?.total || 0;
            page.pageNum = res?.data?.pageNum || 1;
            const currentRow = tableData.value.find((obj: any)=>{return obj.id === selectedId.value});
            if (currentRow) {
                singlelTable.value.setCurrentRow(currentRow);
            }
        }).finally(()=>{
            loading.value = false;
        })
    }

    const handleCurrentChange = (val: any) => { 
        currentRow.value = val;
    }

    const handleSave = () => {
        if(loading.value){
            return;
        }
        callback.value(currentRow.value);
        editDialogRef.value.handleClose();
    }
    const handleClear = () => {
        if(loading.value){
            return;
        }
        callback.value({});
        editDialogRef.value.handleClose();
    }



defineExpose({
    handleOpen
})
</script>
